<script setup lang="ts">
import { useThrottleFn } from '@peng_kai/kit/libs/vueuse';
import { Modal } from 'ant-design-vue';
import { useLocale } from '~/modules/locale';

type TDetail = NonNullable<Api.GetData<typeof apis.apiActivityDaily>['check_in_config']>[0];
type TClaim = NonNullable<Api.GetData<typeof apis.apiActivityDailyBonusClaim>['currency_balance_list']>;
const props = defineProps<{
  detail: TDetail;
}>();
const emits = defineEmits(['refresh']);
const { locale } = useLocale();
const attribute = computed(() => ({
  color: '#22C55E',
  showZero: true,
  offset: [-4, 6],
  numberStyle: { boxShadow: 'none', fontSize: '14px', minWidth: '16px', height: '16px', color: '#fff', lineHeight: '14px', fontWeight: 'bold' },
}));
const results = ref<TClaim | []>([]);

const signMut = useMutation({
  mutationKey: [apis.apiActivityDailyCheckIn.id],
  mutationFn: apis.apiActivityDailyCheckIn.setDefaultConfig({ successMessage: false, errorMessage: false, resultType: 'axios' }),
  onSuccess(res: any) {
    const { currency_balance_list, allow_claim } = res.data.data;
    emits('refresh');
    if ((currency_balance_list?.length ?? 0) > 0 && allow_claim) {
      results.value = currency_balance_list;
      openClaim();
    }
    else if (allow_claim && currency_balance_list?.length === 0) {
      antdMessage.success($t('6jfKCmooPhDVC17niXzi'));
    }
    else {
      antdMessage.success($t('pkIW6hnFspbQo871FXl'));
    }
  },
  onError(error) {
    const e = JSON.parse(JSON.stringify(error));
    switch (e.code) {
      case 39000:
        info($t('tKv9jr1SnPjOnqb99IQu'));
        break;
      case 39001:
        info($t('yFkSfs9LIdp1SXv6rQkJz', { amount: e.data.currency_balance_list[0]?.balance }));
        break;
      case 13001:
        info(e.msg);
        break;
      default:
        antdMessage.error(e.msg);
    }
  },

});

const receiveMut = useMutation({
  mutationKey: [apis.apiActivityDailyBonusClaim.id],
  mutationFn: apis.apiActivityDailyBonusClaim.setDefaultConfig({ successMessage: false, errorMessage: false, resultType: 'axios' }),
  onSuccess(res: any) {
    const { currency_balance_list, allow_claim } = res.data.data;
    emits('refresh');
    if ((currency_balance_list?.length ?? 0) > 0 && allow_claim) {
      results.value = currency_balance_list;
      openClaim();
    }
    else if (allow_claim && currency_balance_list?.length === 0) {
      antdMessage.success($t('6jfKCmooPhDVC17niXzi'));
    }
  },

});

const throttledFn = useThrottleFn(() => {
  signMut.mutate(undefined);
}, 1000);

function onReceive() {
  if ((props.detail?.bonus_count ?? 0) === (props.detail?.remaining_bonus_count ?? 0)) {
    signMut.mutate(undefined);
  }
  else {
    receiveMut.mutate({ days: props.detail?.day ?? 0 });
  }
}

const throttledFn1 = useThrottleFn(() => {
  onReceive();
}, 1000);

function openClaim() {
  globalPopups.claimSuccess.open({ reward: [{ symbol: results.value[0]?.currency, amount: results.value[0]?.balance }] });
}

function info(msg: string) {
  Modal.info({
    content: msg,
    footer: null,
    mask: false,
  });
  setTimeout(() => { Modal.destroyAll(); }, 3000);
}
</script>

<template>
  <div
    class="golden relative h-70px flex-between flex-col rounded-2 px-1.5 py-2.2 tabletl:(w-63px)"
    :class="{
      grey: (!!detail?.is_checkin && !detail?.remaining_bonus_count),
      gradientRed: (detail?.available && (detail?.remaining_bonus_count)) || detail.available,
      golden: (!detail?.available && !detail?.is_checkin),
    }"
  >
    <!-- 普通签到 -->
    <template v-if="!detail?.bonus_count">
      <p v-if="!detail?.remaining_bonus_count || detail?.is_checkin" class="title">
        {{ $t('qoPM3H0rRYpqaoKeZur', { day: (detail?.day ?? 0) }) }}
      </p>
      <div class="self-stretch text-center">
        <span v-if="detail?.is_checkin" class="small signed">{{ $t('sgjxmgLfrjJtDq60_4ZPn') }}</span>
        <span v-if="(!detail?.available && !detail?.is_checkin)" class="small signin">{{ $t('7T1C7SoYhE55Ru9LNnf') }}</span>
        <div v-if="detail?.available" class="bit" @click="throttledFn">
          <span class="text-10px">{{ $t('7T1C7SoYhE55Ru9LNnf') }}</span>
        </div>
      </div>
      <Transition name="fade-scale">
        <div v-if="!!detail?.is_checkin && !detail?.remaining_bonus_count" class="icon absolute left-1/2 top-67% translate--50%">
          <img v-if="locale === 'zh-CN'" src="../../../assets/imgs/attendance/checked.png" class="w-11 object-cover">
          <img v-else src="../../../assets/imgs/attendance/checked-en.png" class="w-11 object-cover">
        </div>
      </Transition>
    </template>

    <!-- 宝箱签到 -->
    <template v-else>
      <div class="h-full w-full flex-between flex-col self-stretch">
        <p v-if="!detail?.available && detail?.remaining_bonus_count" class="title">
          {{ $t('qoPM3H0rRYpqaoKeZur', { day: (detail?.day ?? 0) }) }}
        </p>
        <ABadge :count="(detail?.remaining_bonus_count ?? 0)" v-bind="attribute">
          <img v-if="!detail?.remaining_bonus_count" src="../../../assets/imgs/attendance/open.png" class="w-36px object-cover lt-tabletl:(w-32px)">
          <img v-else src="../../../assets/imgs/attendance/close.png" class="w-36px object-cover lt-tabletl:(w-32px)">
        </ABadge>
        <div v-if="detail?.available && detail?.remaining_bonus_count " class="bit" @click="throttledFn1">
          <span class="text-10px">{{ $t('sx5fQf4CaYkEuTPtBdzg') }}</span>
        </div>
        <span v-if="!detail?.remaining_bonus_count" class="small signed">{{ $t('sgjxmgLfrjJtDq60_4ZPn') }}</span>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.grey {
  .title {
    --uno: 'text-#1E1E1E';
  }
  &::before {
    content: '';
    --uno: 'w-100% h-100% top-0 left-0 absolute rounded-2';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4));
  }
}
.golden {
  background: linear-gradient(180deg, #ffe3a3 0%, #dda21c 100%);
  .title {
    --uno: 'text-#1E1E1E';
  }
}
.gradientRed {
  background: linear-gradient(90deg, #f96243 0%, #ef3636 100%);
  .title {
    --uno: 'text-white';
  }
}

.bit {
  --uno: 'leading-normal self-stretch text-center rounded-1 px-1 text-3 text-#1E1E1E cursor-pointer';
  background: linear-gradient(180deg, #ffe3a3 0%, #dda21c 100%);
}
.title {
  --uno: 'text-3 leading-normal  font-600 text-center not-italic';
}
.small {
  --uno: 'text-2.5 leading-normal font-400 text-center';
}
.signed {
  --uno: 'text-#713F12';
}
.signin {
  --uno: 'text-#713F12';
}

.fade-scale-enter-active,
.fade-scale-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(5);
}

.fade-scale-enter-to,
.fade-scale-leave-from {
  opacity: 1;
  transform: scale(1) translate(-50% -50%);
}
</style>
